#include("../../layout/header.html")
#@layout()
#define content()
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header"><h2>客户管理</h2></div>
        <div class="layui-card-body">
            <!-- 表格搜索栏 -->
            <form id="form" class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">使用场景</label>
                        <div class="layui-input-inline">
                            <select name="scene" id="scene"></select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">关键字:</label>
                        <div class="layui-input-inline">
                            <input name="searchValue" class="layui-input"
                                   placeholder="请输入姓名"/>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">联系方式:</label>
                        <div class="layui-input-inline">
                            <input name="mobile" class="layui-input"
                                   placeholder="请输入联系方式"/>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-inline" style="position: relative;max-width: 400px;">
                            <input id="citypickerS" name="area" class="layui-input" readonly type="text">
                        </div>
                    </div>


                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">来源:</label>
                        <div class="layui-input-inline">
                            <div id="sourceSelect"></div>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">标签:</label>
                        <div class="layui-input-inline">
                            <select id="labelSelect" name="label">
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">录入时间</label>
                        <div class="layui-input-inline">
                            <input type="text" id="createTime" name="createTime" class="layui-input"
                                   autocomplete="off"/>
                        </div>
                    </div>

                </div>
                <div class="layui-form-item ">
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">类型:</label>
                        <div id="typeRadio" class="layui-input-block"></div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">性别:</label>
                        <div id="sexRadio" class="layui-input-block"></div>
                    </div>

                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">加微信:</label>
                        <div id="isJoinWxRadio" class="layui-input-block"></div>
                    </div>


                </div>
                <div class="layui-form-item text-center" >
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="dataTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="refresh" class="layui-btn icon-btn layui-btn-warm">
                            <i class="layui-icon layui-icon-refresh"></i>
                        </button>
                        <a class="layui-btn form-search-expand" search-expand>
                            展开 <i class="layui-icon layui-icon-down"></i></a>

                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
<!-- 表单弹窗 -->
<script type="text/html" id="dataEditDialog">
    <form id="dataEditForm" lay-filter="dataEditForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">姓名:</label>
            <div class="layui-input-block">
                <input name="name" class="layui-input" placeholder="请输入姓名"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">联系方式:</label>
            <div class="layui-input-block">
                <input name="mobile" class="layui-input" placeholder="请输入联系方式"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">省市:</label>
            <div class="layui-input-block" style="position: relative;max-width: 400px;">
                <input id="citypicker" name="area" class="layui-input" readonly type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">类型:</label>
            <div id="type" name="type" class="layui-input-block"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">来源:</label>
            <div class="layui-input-block">
                <div id="source"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">标签:</label>
            <div class="layui-input-block">
                <select id="label" name="label">
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述内容:</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">行业:</label>
            <div class="layui-input-block">
                <select id="trade" name="trade">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别:</label>
            <div id="sex" name="sex" class="layui-input-block"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">其他联系:</label>
            <div class="layui-input-block">
                <input name="spareMobile" class="layui-input" placeholder="请输入其他联系"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否加微信:</label>
            <div id="isJoinWx" name="isJoinWx" class="layui-input-block"></div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="dataEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!--跟进show-->
<script type="text/html" id="showModel_0">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>快速发布</legend>
        <div class="layui-field-box">
            <div id="followFastDiv" class=""></div>
            <form id="followEditForm" lay-filter="followEditForm" class="layui-form model-form">
                <input type="hidden" name="customerId">
                <div class="layui-form-item layui-form-text">
                    <textarea name="content" placeholder="请输入跟进内容" class="layui-textarea"
                              lay-verify="required"></textarea>
                </div>

                <div class="layui-form-item">
                    <div class="layui-col-md6">
                        <div class="layui-input-inline">
                            <select name="type" id="followType" lay-verify="required"></select>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-input-inline text-right">
                            <button class="layui-btn" lay-filter="followEditSubmit" lay-submit>发布</button>
                            <button id="followEditReset" class="layui-btn layui-btn-primary" type="reset">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>

    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>历史跟进</legend>
            <div class="layui-field-box">
                <div id="demoCardList3"></div>
            </div>
        </fieldset>

    </div>
</script>
<!-- 文章模板 -->
<script type="text/html" id="demoCardItem3">

    <div class="article-list-item">
        <span class="layui-badge-rim">{{d.LAY_NUMBER}}楼</span>
        <!--        <div class="layui-badge-list">-->

        <!--        </div>-->
        <div class="article-list-item-text layui-text">
            <span class="layui-badge layui-badge-green">{{d.typeStr}}</span>
            {{d.content}}
        </div>
        <div class="article-list-item-desc layui-text">
            <a href="javascript:;" class="name">{{d.deptName}}</a>&emsp;
            <a href="javascript:;" class="name">{{d.createBy}}</a>
            &emsp;发布于&emsp;<a href="javascript:;">{{d.createTime}}</a>
        </div>
    </div>
</script>
<!--联系人show-->
<script type="text/html" id="showModel_1">
    <div class="layui-row">
        <table id="contactsDataTable" lay-filter="contactsDataTable"></table>
    </div>
</script>
<!--联系人表单-->
<script type="text/html" id="dataEditDialog_1">
    <form id="dataEditForm_1" lay-filter="dataEditForm_1" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <input name="customerId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">名称:</label>
            <div class="layui-input-block">
                <input name="name" class="layui-input" placeholder="请输入名称"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话:</label>
            <div class="layui-input-block">
                <input name="mobile" class="layui-input" placeholder="请输入电话"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-block">
                <input name="email" class="layui-input" placeholder="请输入邮箱"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">微信:</label>
            <div class="layui-input-block">
                <input name="wx" class="layui-input" placeholder="请输入微信"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">决策人:</label>
            <div class="layui-input-block">
                <div id="decisionMakerRadio"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <div id="sexRadio_1"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址:</label>
            <div class="layui-input-block">
                <input name="address" class="layui-input" placeholder="请输入地址"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <textarea name="remark" id="remark" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right ai-form-footer">
            <button class="layui-btn" lay-filter="dataEditSubmit_1" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!--团队成员-->
<script type="text/html" id="showModel_2">
    <table id="teamDataTable" lay-filter="teamDataTable"></table>
</script>
<!--团队成员表单-->
<script type="text/html" id="dataEditDialog_2">
    <form id="dataEditForm_2" lay-filter="dataEditForm_2" class="layui-form model-form">
        <input name="customerId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">用户:</label>
            <div class="layui-input-block">
                <div id="userIdsSelect"></div>
            </div>
        </div>

        <div class="layui-form-item text-right ai-form-footer">
            <button class="layui-btn" lay-filter="dataEditSubmit_2" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!--附件列表-->
<script type="text/html" id="showModel_5">
    <table id="fileDataTable" lay-filter="fileDataTable"></table>
</script>

<!--附件上传表单-->
<script type="text/html" id="dataEditDialog_5">
    <div class="layui-row">
        <div class="layui-fluid">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
                <div class="layui-upload-list" style="max-width: 1000px;">
                    <table class="layui-table">
                        <colgroup>
                            <col max-width="250">
                            <col width="100">
                            <col width="200">
                            <col width="100">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>上传进度</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        </div>
    </div>

</script>

<!--表单弹窗2 多数据复合窗口-->
<script type="text/html" id="dataEditDialog2">
    <div class="layui-row layui-fluid layui-col-space10 default_background">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">基本信息</div>
                <div id="baseInfoDiv" class="layui-card-body">

                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 0;min-height: 89vh;">
                    <div class="layui-tab" lay-filter="demo">
                        <ul class="layui-tab-title">
                            <li class="layui-this"><i class="layui-icon layui-icon-table"></i> 跟进记录</li>
                            <li><i class="layui-icon layui-icon-username"></i> 联系人</li>
                            <li><i class="layui-icon layui-icon-group"></i> 相关团队</li>
                            <li><i class="layui-icon layui-icon-fire"></i> 成交合同</li>
                            <li><i class="layui-icon layui-icon-rmb"></i> 回款账单</li>
                            <li><i class="layui-icon layui-icon-file"></i> 附件</li>
                            <li><i class="layui-icon layui-icon-time"></i> 操作记录</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div id="show0" class="layui-tab-item layui-show"></div>
                            <div id="show1" class="layui-tab-item">内容2</div>
                            <div id="show2" class="layui-tab-item">内容3</div>
                            <div id="show3" class="layui-tab-item">内容4</div>
                            <div id="show4" class="layui-tab-item">内容5</div>
                            <div id="show5" class="layui-tab-item">内容6</div>
                            <div id="show6" class="layui-tab-item">内容7</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="dataTbBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit2"><i class="layui-icon layui-icon-edit"></i> 操作</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="dataTbBar_1">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
</script>

<script type="text/html" id="dataTbBar_5">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="preview"><i class="layui-icon layui-icon-search"></i>
        预览</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="rename"><i class="layui-icon layui-icon-edit"></i> 重命名</a>
    <a class="layui-btn layui-btn-xs" lay-event="download"><i class="layui-icon layui-icon-download-circle"></i> 下载</a>
</script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'formX', 'laydate', 'citypicker', 'badgeX', 'element', 'dataGrid', 'tabX', 'upload','tableX'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var formX = layui.formX;
        var tabX = layui.tabX;
        var laydate = layui.laydate;
        var admin = layui.admin;
        var citypicker = layui.citypicker;
        var badgeX = layui.badgeX;
        var tableX = layui.tableX;
        var element = layui.element;
        var dataGrid = layui.dataGrid;
        var upload = layui.upload;
        var customerSex = [];
        var customerType = [];
        var customerSource = [];
        var customerLabel = [];
        var customerIsJoinWx = [];
        var customerScene = [];
        var followType = [];
        var followFastContent = [];
        var customerTrade = [];
        admin.getDict('sex,customerType,customerSource,customerLabel,boolean,customerScene,followType,followFastContent,customerTrade', function (d) {
            if (0 === d.code) {
                customerSex = d.data.sex;
                formX.renderRadio({
                    elem: '#sexRadio',
                    data: customerSex,
                    name: 'sex',
                    title: 'name',
                    value: 'value',
                })
                customerType = d.data.customerType;
                formX.renderRadio({
                    elem: '#typeRadio',
                    data: customerType,
                    name: 'type',
                    title: 'name',
                    value: 'value',
                })
                // customerSource = d.data.customerSource;
                /*formX.renderSelect({
                    elem: '#sourceSelect',
                    data: customerSource,
                    name: 'name',
                    value: 'value',
                    hint: '请选择来源'
                });*/
                customerLabel = d.data.customerLabel;
                formX.renderSelect({
                    elem: '#labelSelect',
                    data: customerLabel,
                    name: 'name',
                    value: 'value',
                    hint: '请选择标签'
                });
                customerScene = d.data.customerScene;
                formX.renderSelect({
                    elem: '#scene',
                    data: customerScene,
                    name: 'name',
                    value: 'value',
                    hint: '请选择场景',
                    initValue: customerScene[0].value
                });
                customerIsJoinWx = d.data.boolean;
                formX.renderRadio({
                    elem: '#isJoinWxRadio',
                    data: customerIsJoinWx,
                    name: 'isJoinWx',
                    title: 'name',
                    value: 'value',
                })
                followType = d.data.followType;
                followFastContent = d.data.followFastContent;
                customerTrade = d.data.customerTrade;
                /*最后渲染组件*/
                form.render();
            }
        })
        admin.getDictTree('customerSource', function (d) {
            if (d.code == 0) {
                customerSource = d.data.customerSource;
                let renderTreeSelect = formX.renderTreeSelect({
                    el: '#sourceSelect',
                    name: 'source',
                    prop: {value: 'tmpValue'},
                    data: customerSource
                });
            }
        })
        $("#citypickerS").citypicker({level: 'city'});

        formX.renderLaydateRange('createTime');


        var insTb = tableX.init({url:'/crm/customer/list',
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn" ><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="export" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon layui-icon-export"></i>导出</button>&nbsp;',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {type: 'numbers', fixed: 'left'},
                {field: 'name', title: '姓名', fixed: 'left'},
                {field: 'mobile', title: '联系方式', fixed: 'left', minWidth: '120'},
                {
                    field: 'sexStr', title: '性别', templet: function (d) {
                        return d.sex == 0 ? badgeX.initYellow(d.sexStr, 'male') : badgeX.initGreen(d.sexStr, 'female');
                    }
                },
                {field: 'areaName', title: '省市', minWidth: '200'},
                {
                    field: 'typeStr', title: '类型', minWidth: 160, templet: function (d) {
                        let s = d.typeStr;
                        let t = d.type;
                        if (t == 1) {
                            return badgeX.initRed(s, 'fire');
                        } else if (t == 2) {
                            return badgeX.initGreen(s, 'face-smile-b');
                        } else if (t == 3) {
                            return badgeX.initBlue(s, 'face-smile');
                        } else {
                            return badgeX.initGray(s);
                        }
                    }
                },
                {field: 'sourceStr', title: '来源'},
                {
                    field: 'labelStr', title: '标签', templet: function (d) {
                        let t = d.label;
                        return (t == 2 || t == 5 || t == 8) ? badgeX.initGreen(d.labelStr, 'face-smile-b') : d.labelStr;
                    }
                },
                {
                    field: 'isJoinWxStr', title: '是否加微信', templet: function (d) {
                        let t = d.isJoinWx;
                        return t == 1 ? badgeX.initYes() : badgeX.initNo();
                    }
                },
                {field: 'createBy', title: '创建人'},
                {
                    field: 'createTime', sort: true, title: '创建时间', minWidth: '120'
                },
                {
                    field: 'updateBy', sort: true, title: '更新人'
                },
                {
                    field: 'updateTime', sort: true, title: '更新时间', minWidth: '120'
                },
                {title: '操作', toolbar: '#dataTbBar', fixed: 'right', align: 'center', width: 200, minWidth: 200}
            ]]
        })
        /* 渲染表格 */
        /*var insTb = table.render({
            elem: '#dataTable',
            url: '/crm/customer/list',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn" ><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="export" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon layui-icon-export"></i>导出</button>&nbsp;',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {type: 'numbers', fixed: 'left'},
                {field: 'name', title: '姓名', fixed: 'left'},
                {field: 'mobile', title: '联系方式', fixed: 'left', minWidth: '120'},
                {
                    field: 'sexStr', title: '性别', templet: function (d) {
                        return d.sex == 0 ? badgeX.initYellow(d.sexStr, 'male') : badgeX.initGreen(d.sexStr, 'female');
                    }
                },
                {field: 'areaName', title: '省市', minWidth: '200'},
                {
                    field: 'typeStr', title: '类型', minWidth: 160, templet: function (d) {
                        let s = d.typeStr;
                        let t = d.type;
                        if (t == 1) {
                            return badgeX.initRed(s, 'fire');
                        } else if (t == 2) {
                            return badgeX.initGreen(s, 'face-smile-b');
                        } else if (t == 3) {
                            return badgeX.initBlue(s, 'face-smile');
                        } else {
                            return badgeX.initGray(s);
                        }
                    }
                },
                {field: 'sourceStr', title: '来源'},
                {
                    field: 'labelStr', title: '标签', templet: function (d) {
                        let t = d.label;
                        return (t == 2 || t == 5 || t == 8) ? badgeX.initGreen(d.labelStr, 'face-smile-b') : d.labelStr;
                    }
                },
                {
                    field: 'isJoinWxStr', title: '是否加微信', templet: function (d) {
                        let t = d.isJoinWx;
                        return t == 1 ? badgeX.initYes() : badgeX.initNo();
                    }
                },
                {field: 'createBy', title: '创建人'},
                {
                    field: 'createTime', sort: true, title: '创建时间', minWidth: '120'
                },
                {
                    field: 'updateBy', sort: true, title: '更新人'
                },
                {
                    field: 'updateTime', sort: true, title: '更新时间', minWidth: '120'
                },
                {title: '操作', toolbar: '#dataTbBar', fixed: 'right', align: 'center', width: 200, minWidth: 200}
            ]]
        });*/

        /* 表格搜索 */
        form.on('submit(dataTbSearch)', function (data) {
            data.field.area = formX.getCityPickerLastValue('#citypickerS');
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            } else if (obj.event === 'edit2') {
                showEditModel2(obj.data);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showEditModel();
            } else if (obj.event === 'del') { // 删除
                var checkRows = table.checkStatus('dataTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doDel({ids: ids});
            }else if(obj.event === 'export'){
                formX.excelExport('/crm/customer/export?' + $('#form').serialize());
            }
        });

        /* 显示表单弹窗 */
        function showEditModel(mData) {
            admin.popupRight({
                type: 1,
                area: '650px',
                title: (mData ? '修改 ' : '添加 ') + ((mData && mData.name) ? mData.name : "客户信息"),
                content: $('#dataEditDialog').html(),
                success: function (layero, dIndex) {

                    formX.renderRadio({
                        elem: '#sex',
                        data: customerSex,
                        name: 'sex',
                        title: 'name',
                        value: 'value',
                    })
                    formX.renderRadio({
                        elem: '#type',
                        data: customerType,
                        name: 'type',
                        title: 'name',
                        value: 'value',
                    })
                    formX.renderRadio({
                        elem: '#isJoinWx',
                        data: customerIsJoinWx,
                        name: 'isJoinWx',
                        title: 'name',
                        value: 'value',
                    })
                    let tmpSource = formX.renderTreeSelect({
                        el: '#source',
                        name: 'source',
                        prop: {value: 'tmpValue'},
                        data: customerSource
                    })
                    formX.renderSelect({
                        elem: '#label',
                        data: customerLabel,
                        name: 'name',
                        value: 'value',
                        hint: '请选择标签'
                    });


                    formX.renderSelect({
                        elem: '#trade',
                        data: customerTrade,
                        name: 'name',
                        value: 'value',
                        hint: '请选择行业'
                    });
                    if (mData && mData.areaName) {
                        let split = mData.areaName.split(',');
                        $("#citypicker").citypicker({level: 'city', province: split[0], city: split[1]});
                    } else {
                        $("#citypicker").citypicker({level: 'city'});
                    }
                    if (mData && mData.source) {

                        tmpSource.setValue([mData.source])
                    }
                    // 回显表单数据
                    formX.val('dataEditForm', mData);

                    // 表单提交事件
                    form.on('submit(dataEditSubmit)', function (data) {
                        var loadIndex = layer.load(2);
                        data.field.area = formX.getCityPickerValue('#citypicker');
                        admin.post('/crm/customer/add', data.field, function (res) {
                            layer.close(loadIndex);
                            if (0 === res.code) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        });
                        return false;
                    });
                },
                end: function () {

                }
            });
        }

        function showEditModel2(mData) {
            admin.popupRight({
                type: 1,
                area: '95%',
                title: (mData ? '修改 ' : '添加 ') + ((mData && mData.name) ? mData.name : "客户信息"),
                content: $('#dataEditDialog2').html(),
                success: function (layero, dIndex) {
                    $('#baseInfoDiv').html($('#dataEditDialog').html())
                    formX.renderRadio({
                        elem: '#sex',
                        data: customerSex,
                        name: 'sex',
                        title: 'name',
                        value: 'value',
                    })
                    formX.renderRadio({
                        elem: '#type',
                        data: customerType,
                        name: 'type',
                        title: 'name',
                        value: 'value',
                    })
                    formX.renderRadio({
                        elem: '#isJoinWx',
                        data: customerIsJoinWx,
                        name: 'isJoinWx',
                        title: 'name',
                        value: 'value',
                    })
                    let tmpSource = formX.renderTreeSelect({
                        el: '#source',
                        name: 'source',
                        prop: {value: 'tmpValue'},
                        data: customerSource
                    })
                    formX.renderSelect({
                        elem: '#label',
                        data: customerLabel,
                        name: 'name',
                        value: 'value',
                        hint: '请选择标签'
                    });
                    formX.renderSelect({
                        elem: '#trade',
                        data: customerTrade,
                        name: 'name',
                        value: 'value',
                        hint: '请选择行业'
                    });
                    if (mData && mData.areaName) {
                        let split = mData.areaName.split(',');
                        $("#citypicker").citypicker({level: 'city', province: split[0], city: split[1]});
                    } else {
                        $("#citypicker").citypicker({level: 'city'});
                    }
                    if (mData && mData.source) {
                        tmpSource.setValue([mData.source])
                    }
                    // 回显表单数据
                    formX.val('dataEditForm', mData);

                    // 表单提交事件
                    form.on('submit(dataEditSubmit)', function (data) {
                        var loadIndex = layer.load(2);
                        data.field.area = formX.getCityPickerValue('#citypicker');
                        admin.post('/crm/customer/add', data.field, function (res) {
                            layer.close(loadIndex);
                            if (0 === res.code) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        });
                        return false;
                    });

                    /*默认加载跟进记录*/
                    showFollow(mData.id)
                    element.on('tab(demo)', function (data) {
                        let i = data.index;
                        if (i === 0) {
                            showFollow(mData.id)
                        } else if (i === 1) {
                            showContacts(mData.id);
                        } else if (i === 2) {
                            showTeamMember(mData.id);
                        } else if (i === 3) {

                        } else if (i === 4) {

                        } else if (i === 5) {
                            showFiles(mData.id);
                        } else if (i === 6) {

                        }
                    });

                },
                end: function () {

                }
            });
        }


        /*渲染跟进记录html*/
        function showFollow(customerId) {
            $('#show0').html($('#showModel_0').html());

            $.each(followFastContent, function (i, n) {
                $('#followFastDiv').append('<button type="button" class="layui-btn layui-btn-primary layui-border-green fastFollow">' + n.name + '</button>')
            })
            $('.fastFollow').click(function () {
                $('#followEditForm textarea[name=content]').html($(this).text())
            })

            formX.renderSelect({
                elem: '#followType',
                data: followType,
                name: 'name',
                value: 'value',
                hint: '请选择跟进类型',
                initValue: followType[0].value
            });

            let dg = dataGrid.render({
                elem: '#demoCardList3',
                templet: '#demoCardItem3',
                data: '/crm/follow/list',
                page: {limit: 5},
                where: {customerId: customerId}
            });
            $('input[name=customerId]').val(customerId)
            // 表单提交事件
            form.on('submit(followEditSubmit)', function (data) {
                var loadIndex = layer.load(2);
                admin.post('/crm/follow/add', data.field, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        $('#followEditReset').click()
                        dg.reload({loadMore: {limit: 100}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
                return false;
            });
        }

        /*渲染联系人记录html*/
        function showContacts(customerId) {
            $('#show1').html($('#showModel_1').html());
            let contactsTb = table.render({
                elem: '#contactsDataTable',
                url: '/crm/contacts/list',
                page: false,
                limit: 100,
                toolbar: ['<p>',
                    '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                    '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                    '</p>'].join(''),
                cellMinWidth: 100,
                where: {customerId: customerId},
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {type: 'numbers', fixed: 'left'},
                    {field: 'name', title: '姓名', fixed: 'left'},
                    {field: 'mobile', title: '电话', fixed: 'left', minWidth: '120'},
                    {
                        field: 'sexStr', title: '性别', templet: function (d) {
                            return d.sex == 0 ? badgeX.initYellow(d.sexStr, 'male') : badgeX.initGreen(d.sexStr, 'female');
                        }
                    },
                    {
                        field: 'isJoinWxStr', title: '决策人', templet: function (d) {
                            let t = d.decisionMaker;
                            return t == 1 ? badgeX.initYes() : badgeX.initNo();
                        }
                    },
                    {field: 'createBy', title: '创建人'},
                    {
                        field: 'createTime', sort: true, title: '创建时间', minWidth: '120'
                    },
                    {
                        field: 'updateBy', sort: true, title: '更新人'
                    },
                    {
                        field: 'updateTime', sort: true, title: '更新时间', minWidth: '120'
                    },
                    {title: '操作', toolbar: '#dataTbBar_1', fixed: 'right', align: 'center', width: 100, minWidth: 100}
                ]]
            });

            function doDel_1(obj) {
                layer.confirm('确定要删除选中数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    admin.req('/crm/contacts/del', {
                        id: obj.data ? obj.data.id : '',
                        ids: obj.ids ? obj.ids.join(',') : ''
                    }, function (res) {
                        layer.close(loadIndex);
                        if (0 === res.code) {
                            layer.msg(res.msg, {icon: 1});
                            contactsTb.reload({page: {curr: 1}});
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    });
                });
            }

            function showEditModel_1(mData) {
                admin.popupRight({
                    type: 1,
                    area: '360px',
                    title: (mData ? '修改 ' : '添加 ') + ((mData && mData.name) ? mData.name : "客户联系人"),
                    content: $('#dataEditDialog_1').html(),
                    success: function (layero, dIndex) {

                        formX.renderRadio({
                            elem: '#decisionMakerRadio',
                            data: customerIsJoinWx,
                            name: 'decisionMaker',
                            title: 'name',
                            value: 'value',
                        })
                        formX.renderRadio({
                            elem: '#sexRadio_1',
                            data: customerSex,
                            name: 'sex',
                            title: 'name',
                            value: 'value',
                        })
                        // 回显表单数据
                        form.val('dataEditForm_1', mData);
                        // 表单提交事件
                        form.on('submit(dataEditSubmit_1)', function (data) {
                            var loadIndex = layer.load(2);
                            data.field.customerId = customerId;
                            admin.post('/crm/contacts/add', data.field, function (res) {
                                layer.close(loadIndex);
                                if (0 === res.code) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    contactsTb.reload({page: {curr: 1}});
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            });
                            return false;
                        });
                    },
                    end: function () {

                    }
                });
            }

            table.on('toolbar(contactsDataTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel_1();
                } else if (obj.event === 'del') { // 删除
                    var checkRows = table.checkStatus('contactsDataTable');
                    if (checkRows.data.length === 0) {
                        layer.msg('请选择要删除的数据', {icon: 2});
                        return;
                    }
                    var ids = checkRows.data.map(function (d) {
                        return d.id;
                    });
                    doDel_1({ids: ids});
                }
            });

            table.on('tool(contactsDataTable)', function (obj) {
                if (obj.event === 'edit') { // 修改
                    showEditModel_1(obj.data);
                }
            });
        }

        /*渲染团队成员*/
        function showTeamMember(customerId) {
            $('#show2').html($('#showModel_2').html());
            let tmTb = table.render({
                elem: '#teamDataTable',
                url: '/crm/customer/getMembers',
                page: false,
                limit: 100,
                toolbar: ['<p>',
                    '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                    '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>移出团队</button>',
                    '</p>'].join(''),
                cellMinWidth: 100,
                where: {customerId: customerId},
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {type: 'numbers', fixed: 'left'},
                    {field: 'realName', title: '姓名', fixed: 'left'},
                    {field: 'orgName', title: '部门', fixed: 'left', minWidth: '120'},
                    {field: 'mainRole', title: '角色'},
                    {field: 'permDesc', title: '权限'},
                ]]
            });
            var users = [];
            admin.req('/sys/sysUser/list', {page: 1, limit: 10000, state: 0}, function (res) {
                if (res.code === 0) {
                    users = res.data
                }
            })
            table.on('toolbar(teamDataTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel_2();
                } else if (obj.event === 'del') { // 删除
                    var checkRows = table.checkStatus('teamDataTable');
                    if (checkRows.data.length === 0) {
                        layer.msg('请选择要删除的数据', {icon: 2});
                        return;
                    }
                    var ids = checkRows.data.map(function (d) {
                        return d.id;
                    });
                    doDel_2({ids: ids});
                }
            });

            function showEditModel_2(mData) {
                admin.popupRight({
                    type: 1,
                    area: '360px',
                    title: (mData ? '修改 ' : '添加 ') + ((mData && mData.name) ? mData.name : "客户团队成员"),
                    content: $('#dataEditDialog_2').html(),
                    success: function (layero, dIndex) {

                        formX.renderMultiSelect({
                            el: '#userIdsSelect',
                            name: 'userIds',
                            prop: {name: 'realName', value: 'id'},
                            data: users
                        })
                        // 回显表单数据
                        form.val('dataEditForm_2', mData);
                        // 表单提交事件
                        form.on('submit(dataEditSubmit_2)', function (data) {
                            var loadIndex = layer.load(2);
                            data.field.customerId = customerId;
                            admin.post('/crm/customer/addMember', data.field, function (res) {
                                layer.close(loadIndex);
                                if (0 === res.code) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    tmTb.reload();
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            });
                            return false;
                        });
                    },
                    end: function () {

                    }
                });
            }

            function doDel_2(obj) {
                layer.confirm('确定要删除选中数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    admin.req('/crm/customer/delMember', {
                        userIds: obj.ids ? obj.ids.join(',') : '',
                        customerId: customerId
                    }, function (res) {
                        layer.close(loadIndex);
                        if (0 === res.code) {
                            layer.msg(res.msg, {icon: 1});
                            tmTb.reload();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    });
                });
            }
        }

        /*渲染附件列表 */
        function showFiles(customerId) {
            $('#show5').html($('#showModel_5').html());
            let fTb = table.render({
                elem: '#fileDataTable',
                url: '/sys/file/list',
                page: false,
                limit: 100,
                toolbar: ['<p>',
                    '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon layui-icon-upload"></i>上传</button>&nbsp;',
                    '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                    '</p>'].join(''),
                cellMinWidth: 100,
                where: {relationId: customerId, relationTable: 'crm_customer'},
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {type: 'numbers', fixed: 'left'},
                    {field: 'name', title: '名称', fixed: 'left', width: 200},
                    {field: 'size', title: '大小(KB)', fixed: 'left'},
                    {field: 'type', title: '类型'},
                    {field: 'createBy', title: '上传人'},
                    {field: 'createTime', title: '上传时间'},
                    {title: '操作', toolbar: '#dataTbBar_5', fixed: 'right', align: 'center', minWidth: 250}
                ]]
            });

            table.on('toolbar(fileDataTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel_5();
                } else if (obj.event === 'del') { // 删除
                    var checkRows = table.checkStatus('fileDataTable');
                    if (checkRows.data.length === 0) {
                        layer.msg('请选择要删除的数据', {icon: 2});
                        return;
                    }
                    var ids = checkRows.data.map(function (d) {
                        return d.id;
                    });
                    doDel_5({ids: ids});
                }
            });

            table.on('tool(fileDataTable)', function (obj) {
                if (obj.event === 'preview') { // 修改
                    layer.photos({
                        photos: {
                            "title": "", //相册标题
                            "id": obj.data.id, //相册id
                            "start": 0, //初始显示的图片序号，默认0
                            "data": [   //相册包含的图片，数组格式
                                {
                                    "alt": "图片名",
                                    "pid": 666, //图片id
                                    "src": "../../../" + obj.data.filePath, //原图地址
                                    "thumb": "" //缩略图地址
                                }
                            ]
                        }
                        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                }else if(obj.event === 'rename'){
                    admin.prompt({formType: 0 ,title: '重命名',value: obj.data.name},function (value,index,elem) {
                        console.log(value)
                        admin.req('/sys/file/rename',{name:value ,id : obj.data.id},function (d) {
                            if(d.code === 0 ){
                                layer.close(index);
                                sys(d.msg)
                                fTb.reload();
                            }else {
                                layer.close(index);
                                admin.no(d.msg)
                            }
                        })
                    })
                }else if(obj.event === 'download'){
                    // admin.req('/sys/file/download',{id:obj.data.id})
                    window.open('/sys/file/download?id=' + obj.data.id);
                }
            });

            function showEditModel_5(mData) {
                admin.popupRight({
                    type: 1,
                    area: '760px',
                    title: (mData ? '修改 ' : '添加 ') + ((mData && mData.name) ? mData.name : "附件"),
                    content: $('#dataEditDialog_5').html(),
                    success: function (layero, dIndex) {
                        // 回显表单数据
                        // 表单提交事件

                        var uploadListIns = upload.render({
                            elem: '#testList'
                            , elemList: $('#demoList') //列表元素对象
                            , url: '/sys/file/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                            , accept: 'file'
                            , multiple: true
                            , number: 3
                            , auto: false
                            , bindAction: '#testListAction'
                            , data: {customerId: customerId, tableName: "crm_customer"}
                            , choose: function (obj) {
                                var that = this;
                                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                                //读取本地文件
                                obj.preview(function (index, file, result) {
                                    var tr = $(['<tr id="upload-' + index + '">'
                                        , '<td>' + file.name + '</td>'
                                        , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                                        , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                                        , '<td>'
                                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                        , '</td>'
                                        , '</tr>'].join(''));

                                    //单个重传
                                    tr.find('.demo-reload').on('click', function () {
                                        obj.upload(index, file);
                                    });

                                    //删除
                                    tr.find('.demo-delete').on('click', function () {
                                        delete files[index]; //删除对应的文件
                                        tr.remove();
                                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                    });

                                    that.elemList.append(tr);
                                    element.render('progress'); //渲染新加的进度条组件
                                });
                            }
                            , done: function (res, index, upload) { //成功的回调
                                var that = this;
                                //if(res.code == 0){ //上传成功
                                var tr = that.elemList.find('tr#upload-' + index)
                                    , tds = tr.children();
                                tds.eq(3).html(''); //清空操作
                                delete this.files[index]; //删除文件队列已经上传成功的文件
                                return;
                                //}
                                this.error(index, upload);
                            }
                            , allDone: function (obj) { //多文件上传完毕后的状态回调
                                layer.close(dIndex);
                                console.log(obj)
                                layer.msg("全部上传完毕！", {icon: 1});
                                fTb.reload();
                            }
                            , error: function (index, upload) { //错误回调
                                var that = this;
                                var tr = that.elemList.find('tr#upload-' + index)
                                    , tds = tr.children();
                                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                            }
                            , progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
                                element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
                            }
                        });

                    },
                    end: function () {

                    }
                });
            }

            function doDel_5(obj) {
                layer.confirm('确定要删除选中数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    admin.req('/sys/file/del', {
                        id: obj.data ? obj.data.id : '',
                        ids: obj.ids ? obj.ids.join(',') : ''
                    }, function (res) {
                        layer.close(loadIndex);
                        if (0 === res.code) {
                            layer.msg(res.msg, {icon: 1});
                            fTb.reload();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    });
                });
            }

        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                admin.req('/crm/customer/del', {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
            });
        }

        $('#refresh').click(function () {
            window.location.reload()
        })


    });
</script>
</body>
#end
